import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { Input } from '../ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Label } from '../ui/label';
import { Textarea } from '../ui/textarea';
import { 
  BookOpen, 
  Calendar, 
  Clock,
  MapPin,
  Search, 
  Plus, 
  Edit,
  Trash2,
  Eye,
  AlertTriangle,
  Settings
} from 'lucide-react';

interface Course {
  id: string;
  code: string;
  name: string;
  credits: number;
  department: string;
  type: string;
  prerequisites: string[];
  status: 'active' | 'inactive';
  description: string;
}

interface Schedule {
  id: string;
  courseName: string;
  courseCode: string;
  teacher: string;
  className: string;
  dayOfWeek: string;
  timeSlot: string;
  classroom: string;
  semester: string;
  weeks: string;
  conflicts?: boolean;
}

interface Classroom {
  id: string;
  name: string;
  building: string;
  capacity: number;
  type: string;
  equipment: string[];
  status: 'available' | 'occupied' | 'maintenance';
}

export function CourseSystemConfig() {
  const [activeTab, setActiveTab] = useState('courses');
  const [searchTerm, setSearchTerm] = useState('');
  const [showCourseForm, setShowCourseForm] = useState(false);
  const [showScheduleWizard, setShowScheduleWizard] = useState(false);

  const courses: Course[] = [
    {
      id: '1',
      code: 'MATH001',
      name: '高等数学A',
      credits: 5,
      department: '数学学院',
      type: '公共必修',
      prerequisites: [],
      status: 'active',
      description: '数学分析的基础课程，包含极限、导数、积分等内容'
    },
    {
      id: '2',
      code: 'CS001',
      name: '计算机程序设计',
      credits: 4,
      department: '计算机科学学院',
      type: '专业必修',
      prerequisites: [],
      status: 'active',
      description: 'C语言程序设计基础，培养编程思维和能力'
    },
    {
      id: '3',
      code: 'CS002',
      name: '数据结构',
      credits: 3,
      department: '计算机科学学院',
      type: '专业必修',
      prerequisites: ['CS001'],
      status: 'active',
      description: '学习基本数据结构和算法设计与分析'
    }
  ];

  const schedules: Schedule[] = [
    {
      id: '1',
      courseName: '高等数学A',
      courseCode: 'MATH001',
      teacher: '陈教授',
      className: '计算机21-1班',
      dayOfWeek: '周一',
      timeSlot: '8:00-9:40',
      classroom: '教学楼A-101',
      semester: '2024-1',
      weeks: '1-16周',
      conflicts: false
    },
    {
      id: '2',
      courseName: '高等数学A',
      courseCode: 'MATH001',
      teacher: '陈教授',
      className: '计算机21-2班',
      dayOfWeek: '周一',
      timeSlot: '10:00-11:40',
      classroom: '教学楼A-101',
      semester: '2024-1',
      weeks: '1-16周',
      conflicts: false
    },
    {
      id: '3',
      courseName: '计算机程序设计',
      courseCode: 'CS001',
      teacher: '张老师',
      className: '计算机21-1班',
      dayOfWeek: '周二',
      timeSlot: '8:00-9:40',
      classroom: '实验楼B-201',
      semester: '2024-1',
      weeks: '1-16周',
      conflicts: true
    }
  ];

  const classrooms: Classroom[] = [
    {
      id: '1',
      name: 'A-101',
      building: '教学楼A',
      capacity: 120,
      type: '普通教室',
      equipment: ['多媒体投影', '音响系统', '空调'],
      status: 'available'
    },
    {
      id: '2',
      name: 'B-201',
      building: '实验楼B',
      capacity: 60,
      type: '计算机实验室',
      equipment: ['计算机60台', '投影仪', '网络设备'],
      status: 'occupied'
    },
    {
      id: '3',
      name: 'C-301',
      building: '语音楼C',
      capacity: 40,
      type: '语音教室',
      equipment: ['语音设备', '耳机40套', '多媒体系统'],
      status: 'maintenance'
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'active':
      case 'available':
        return <Badge className="bg-green-100 text-green-800">可用</Badge>;
      case 'inactive':
      case 'occupied':
        return <Badge variant="secondary">占用</Badge>;
      case 'maintenance':
        return <Badge variant="destructive">维护</Badge>;
      default:
        return <Badge variant="outline">未知</Badge>;
    }
  };

  const getConflictBadge = (hasConflict: boolean) => {
    return hasConflict ? 
      <Badge variant="destructive"><AlertTriangle className="w-3 h-3 mr-1" />冲突</Badge> :
      <Badge className="bg-green-100 text-green-800">正常</Badge>;
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h1 className="text-2xl font-medium">课程体系配置</h1>
        <div className="flex gap-2">
          <Button variant="outline">
            <Settings className="mr-2 h-4 w-4" />
            系统设置
          </Button>
          <Button onClick={() => setShowCourseForm(true)}>
            <Plus className="mr-2 h-4 w-4" />
            新增课程
          </Button>
        </div>
      </div>

      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
        <TabsList>
          <TabsTrigger value="courses">课程管理</TabsTrigger>
          <TabsTrigger value="scheduling">排课管理</TabsTrigger>
          <TabsTrigger value="classrooms">教室管理</TabsTrigger>
        </TabsList>

        <TabsContent value="courses" className="space-y-4">
          {/* Course Overview */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">课程总数</p>
                    <p className="text-2xl font-medium">{courses.length}</p>
                  </div>
                  <BookOpen className="h-8 w-8 text-blue-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">必修课程</p>
                    <p className="text-2xl font-medium">
                      {courses.filter(c => c.type.includes('必修')).length}
                    </p>
                  </div>
                  <BookOpen className="h-8 w-8 text-green-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">选修课程</p>
                    <p className="text-2xl font-medium">
                      {courses.filter(c => c.type.includes('选修')).length}
                    </p>
                  </div>
                  <BookOpen className="h-8 w-8 text-orange-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">开设院系</p>
                    <p className="text-2xl font-medium">
                      {new Set(courses.map(c => c.department)).size}
                    </p>
                  </div>
                  <BookOpen className="h-8 w-8 text-purple-500" />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Search and Filter */}
          <Card>
            <CardContent className="p-4">
              <div className="flex gap-4">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="搜索课程名称或编号..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
                <Select>
                  <SelectTrigger className="w-48">
                    <SelectValue placeholder="课程类型" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">全部类型</SelectItem>
                    <SelectItem value="公共必修">公共必修</SelectItem>
                    <SelectItem value="专业必修">专业必修</SelectItem>
                    <SelectItem value="专业选修">专业选修</SelectItem>
                    <SelectItem value="通识选修">通识选修</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* Courses Table */}
          <Card>
            <CardHeader>
              <CardTitle>课程列表</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>课程编号</TableHead>
                    <TableHead>课程名称</TableHead>
                    <TableHead>学分</TableHead>
                    <TableHead>开设院系</TableHead>
                    <TableHead>课程类型</TableHead>
                    <TableHead>先修课程</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {courses.map((course) => (
                    <TableRow key={course.id}>
                      <TableCell className="font-medium">{course.code}</TableCell>
                      <TableCell>{course.name}</TableCell>
                      <TableCell>{course.credits}</TableCell>
                      <TableCell>{course.department}</TableCell>
                      <TableCell>
                        <Badge variant="outline">{course.type}</Badge>
                      </TableCell>
                      <TableCell>
                        {course.prerequisites.length > 0 ? 
                          course.prerequisites.join(', ') : 
                          <span className="text-muted-foreground">无</span>
                        }
                      </TableCell>
                      <TableCell>{getStatusBadge(course.status)}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Eye className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="h-3 w-3 text-red-500" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="scheduling" className="space-y-4">
          <div className="flex justify-between items-center">
            <h2 className="text-lg font-medium">排课管理</h2>
            <div className="flex gap-2">
              <Button variant="outline">
                <AlertTriangle className="mr-2 h-4 w-4" />
                冲突检测
              </Button>
              <Button onClick={() => setShowScheduleWizard(true)}>
                <Plus className="mr-2 h-4 w-4" />
                新增排课
              </Button>
            </div>
          </div>

          {/* Schedule Table */}
          <Card>
            <CardHeader>
              <CardTitle>排课列表 - 2024年第一学期</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>课程</TableHead>
                    <TableHead>教师</TableHead>
                    <TableHead>班级</TableHead>
                    <TableHead>时间</TableHead>
                    <TableHead>教室</TableHead>
                    <TableHead>周次</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {schedules.map((schedule) => (
                    <TableRow key={schedule.id}>
                      <TableCell>
                        <div>
                          <p className="font-medium">{schedule.courseName}</p>
                          <p className="text-sm text-muted-foreground">{schedule.courseCode}</p>
                        </div>
                      </TableCell>
                      <TableCell>{schedule.teacher}</TableCell>
                      <TableCell>{schedule.className}</TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <Calendar className="h-4 w-4" />
                          <span>{schedule.dayOfWeek}</span>
                          <Clock className="h-4 w-4" />
                          <span>{schedule.timeSlot}</span>
                        </div>
                      </TableCell>
                      <TableCell>
                        <div className="flex items-center space-x-2">
                          <MapPin className="h-4 w-4" />
                          <span>{schedule.classroom}</span>
                        </div>
                      </TableCell>
                      <TableCell>{schedule.weeks}</TableCell>
                      <TableCell>{getConflictBadge(schedule.conflicts || false)}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Edit className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Trash2 className="h-3 w-3 text-red-500" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="classrooms" className="space-y-4">
          <div className="flex justify-between items-center">
            <h2 className="text-lg font-medium">教室管理</h2>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              新增教室
            </Button>
          </div>

          {/* Classroom Overview */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">教室总数</p>
                    <p className="text-2xl font-medium">{classrooms.length}</p>
                  </div>
                  <MapPin className="h-8 w-8 text-blue-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">可用教室</p>
                    <p className="text-2xl font-medium">
                      {classrooms.filter(c => c.status === 'available').length}
                    </p>
                  </div>
                  <MapPin className="h-8 w-8 text-green-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">使用中</p>
                    <p className="text-2xl font-medium">
                      {classrooms.filter(c => c.status === 'occupied').length}
                    </p>
                  </div>
                  <MapPin className="h-8 w-8 text-orange-500" />
                </div>
              </CardContent>
            </Card>
            
            <Card>
              <CardContent className="p-6">
                <div className="flex items-center justify-between">
                  <div>
                    <p className="text-sm text-muted-foreground">维护中</p>
                    <p className="text-2xl font-medium">
                      {classrooms.filter(c => c.status === 'maintenance').length}
                    </p>
                  </div>
                  <MapPin className="h-8 w-8 text-red-500" />
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Classrooms Table */}
          <Card>
            <CardHeader>
              <CardTitle>教室列表</CardTitle>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>教室编号</TableHead>
                    <TableHead>所属楼栋</TableHead>
                    <TableHead>容量</TableHead>
                    <TableHead>类型</TableHead>
                    <TableHead>设备配置</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>操作</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {classrooms.map((classroom) => (
                    <TableRow key={classroom.id}>
                      <TableCell className="font-medium">{classroom.name}</TableCell>
                      <TableCell>{classroom.building}</TableCell>
                      <TableCell>{classroom.capacity}人</TableCell>
                      <TableCell>
                        <Badge variant="outline">{classroom.type}</Badge>
                      </TableCell>
                      <TableCell>
                        <div className="text-sm">
                          {classroom.equipment.slice(0, 2).join(', ')}
                          {classroom.equipment.length > 2 && '...'}
                        </div>
                      </TableCell>
                      <TableCell>{getStatusBadge(classroom.status)}</TableCell>
                      <TableCell>
                        <div className="flex space-x-2">
                          <Button variant="ghost" size="sm">
                            <Eye className="h-3 w-3" />
                          </Button>
                          <Button variant="ghost" size="sm">
                            <Edit className="h-3 w-3" />
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* Course Form Modal */}
      {showCourseForm && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <Card className="w-full max-w-2xl max-h-[90vh] overflow-auto">
            <CardHeader>
              <CardTitle>新增课程</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="courseCode">课程编号</Label>
                  <Input id="courseCode" placeholder="请输入课程编号" />
                </div>
                <div>
                  <Label htmlFor="courseName">课程名称</Label>
                  <Input id="courseName" placeholder="请输入课程名称" />
                </div>
              </div>

              <div className="grid grid-cols-2 gap-4">
                <div>
                  <Label htmlFor="credits">学分</Label>
                  <Input id="credits" type="number" placeholder="请输入学分" />
                </div>
                <div>
                  <Label htmlFor="courseType">课程类型</Label>
                  <Select>
                    <SelectTrigger>
                      <SelectValue placeholder="选择课程类型" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="公共必修">公共必修</SelectItem>
                      <SelectItem value="专业必修">专业必修</SelectItem>
                      <SelectItem value="专业选修">专业选修</SelectItem>
                      <SelectItem value="通识选修">通识选修</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

              <div>
                <Label htmlFor="department">开设院系</Label>
                <Select>
                  <SelectTrigger>
                    <SelectValue placeholder="选择院系" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="计算机科学学院">计算机科学学院</SelectItem>
                    <SelectItem value="数学学院">数学学院</SelectItem>
                    <SelectItem value="外语学院">外语学院</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="description">课程描述</Label>
                <Textarea
                  id="description"
                  placeholder="请输入课程描述..."
                  rows={3}
                />
              </div>

              <div className="flex gap-2 pt-4">
                <Button className="flex-1">创建课程</Button>
                <Button variant="outline" onClick={() => setShowCourseForm(false)}>取消</Button>
              </div>
            </CardContent>
          </Card>
        </div>
      )}
    </div>
  );
}